<template>
  <div class="disease-diagnosis-container">
    <el-menu
      default-active="userDiagnosis"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item
        index="userDiagnosis"
        @click="handleRouteChange('userDiagnosis')"
        >智能眼底分析</el-menu-item
      >
      <el-menu-item
        index="diagnosisReport"
        @click="handleRouteChange('diagnosisReport')"
        >诊断报告</el-menu-item
      >
    </el-menu>
    <div class="content-wrapper">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  useRoute,
  useRouter,
  RouteLocationNormalized,
  Router,
} from "vue-router";
const route: RouteLocationNormalized = useRoute();
const router: Router = useRouter();

const selectedRoute = ref<string>(route.name as string);

const handleRouteChange = (routeName: string) => {
  selectedRoute.value = routeName;
  router.push({ path: `/user/diseaseDiagnosis/${routeName}` });
};
onMounted(() => {
  router.push("/user/diseaseDiagnosis/userDiagnosis");
});
</script>

<style scoped>
.disease-diagnosis-container {
  padding: 20px;
  max-width: 100%;
}
</style>
